<template>
  <div class="products" v-if="shopId">
    <div class="products__wrapper">
      <div class="products__title">
        {{ shopName }}
      </div>
      <div class="products__list">
        <div v-for="item in productList" :key="item._id" class="products__item">
          <img class="products__item__img" :src="item.imgUrl" />
          <div class="products__item__detail">
            <h4 class="products__item__title">{{ item.name }}</h4>
            <p class="products__item__price">
              <span>
                <span class="products__item__yen">&yen; </span>
                {{ item.price }} x {{ item.count }}
              </span>
              <span class="products__item__total">
                <span class="products__item__yen">&yen; </span>
                {{ (item.price * item.count).toFixed(2) }}
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="products" v-else>
    <div class="products__wrapper">
      <div class="products__title">
        <b>{{ shopNames }}</b>
      </div>
      <div class="products__list">
        <div
          v-for="(item, name, index) in productLists"
          :key="item._id"
          class="products__item"
          v-show="index < num"
        >
          <img class="products__item__img" :src="item.imgUrl" />
          <div class="products__item__detail">
            <h4 class="products__item__title">{{ item.name }}</h4>
            <p class="products__item__price">
              <span>
                <span class="products__item__yen">&yen; </span>
                {{ item.price }} x {{ item.count }}
              </span>
              <span class="products__item__total">
                <span class="products__item__yen">&yen; </span>
                {{ (item.price * item.count).toFixed(2) }}
              </span>
            </p>
          </div>
        </div>
        <div
          class="point"
          v-show="Object.keys(productLists).length > 2 && isShow"
          @click="isShowClick"
        >
          共计{{ Object.keys(productLists).length }}件/1.4kg
          <span class="iconfont aaa">&#xe6f2;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useCommonCartEffect } from "../effects/cartEffects";
export default {
  name: "ProductList",
  props: ["productLists", "shopNames"],
  setup() {
    const route = useRoute();
    const shopId = route.params.id;
    // console.log(shopId);
    let isShow = ref(true);
    let num = ref(2);
    const isShowClick = () => {
      isShow.value = false;
      num.value = 10000000000;
      console.log(num.value);
    };
    if (shopId) {
      const { shopName, productList } = useCommonCartEffect(shopId);
      return { shopName, productList, shopId };
    }
    return { isShowClick, isShow, num };
  },
};
</script>

<style lang="scss" scoped>
@import "../style/viriables.scss";
@import "../style/mixins.scss";
.products {
  margin: 0.16rem 0.18rem 0 0.18rem;
  background: $bgColor;
  &__title {
    padding: 0.16rem;
    font-size: 0.16rem;
    color: $content-fontcolor;
    background-color: #fff;
  }
  &__wrapper {
    overflow-y: scroll;
    margin: 0 0.18rem;
  }
  &__list {
    background: $bgColor;
  }
  &__item {
    position: relative;
    display: flex;
    padding: 0 0.16rem 0.16rem 0.16rem;
    &__img {
      width: 0.46rem;
      height: 0.46rem;
      margin-right: 0.16rem;
    }
    &__detail {
      flex: 1;
    }
    &__title {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $content-fontcolor;
      @include ellipsis;
    }
    &__price {
      display: flex;
      margin: 0.06rem 0 0 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $hightlight-fontColor;
    }
    &__total {
      flex: 1;
      text-align: right;
      color: $dark-fontColor;
    }
    &__yen {
      font-size: 0.12rem;
    }
  }
}
.point {
  position: relative;
  width: 3rem;
  height: 0.26rem;
  font-size: 0.14rpx;
  text-align: center;
  line-height: 0.26rem;
  background-color: $search-bgColor;
  margin-bottom: 0.16rem;
  margin-top: 0.04rem;
}
.aaa {
  position: absolute;
  right: .9rem;
  transform: rotate(-90deg) !important;
  font-size: 0.14rem;
}
.show {
  display: none !important;
}
</style>